<style lang="scss" scoped>
  .operation-panel{
    height: 90px;
    width:100%;
    clear: both;
    float: left;
  }

  .panel-left{
    min-width:450px;
    height: 100%;
    float: left;
    text-align: center;

    .row{
      width:100%;
      padding-top: 15px;
      text-align: center;
    }

    .check-group{
      height: 45px;
      /*float: left;*/
      position: relative;
      text-align: center;
      widtH:80px;
      display: inline-block;
    }

    .radio{
      position: absolute;
      left:2px;
      top:7px;
      width:25px;
      height: 25px;
      opacity: 0;
      &:checked ~.icon-select{
        background-image: url("../../../../assets/images/ok_active.png");
      }
    }


    .icon-select{
      display: inline-block;
      width:25px;
      height: 25px;
      background-size: cover;
      vertical-align: middle;
      cursor: pointer;
      background-image: url("../../../../assets/images/ok_disabled.png");
      vertical-align: middle;
    }

    .icon-text{
      display: inline-block;
      width:40px;
      font-family: '微软雅黑';
      height: 45px;
      line-height: 45px;
      vertical-align: middle;
    }

    .select-group{
      display: inline-block;
      /*float: left;*/
      height: 45px;
      width: 120px;
      text-align: center;
      line-height:42px;
      color: #5a5a5a;
    }

    .date-select{
      width: 60px;
      height: 30px;
      display: inline-block;
      text-align: center;
      outline: none;
    }

    .date-select-text{
      margin:0px 10px 0 5px;
      display: inline-block;
    }

    .icon-owner{
      display: inline-block;
      width:25px;
      height: 25px;
      background-size: cover;
      vertical-align: middle;
      cursor: pointer;
      background-image: url("../../../../assets/images/user2.png");
      /*vertical-align: middle;*/
    }

    .owner{
      color: #5a5a5a;
      height: 25px;
      /*float: left;*/
      display: inline-block;
      line-height: 25px;
      /*vertical-align: middle;*/
      font-family: '微软雅黑';
    }
    .select-time{
      font-size: 12px;
      font-family: '微软雅黑';
    }

  }

  .panel-right{
    min-width:500px;
    height: 100%;
    float: right;
    line-height: 90px;
    text-align: center;
  }

  .panel-body{
    width:100%;
    height: auto;
    clear: both;
    float: left;
    display: block;

    margin-top: 10px;

    .banner{
      width:100%;
      height: 80px;
      display: block;
      float: left;
      background: #f4f4f4;
      position: relative;
    }

    .banner-box-shadow{
      width:100%;
      height: 6px;
      display: block;
      position: absolute;
      left:0;
      bottom:-6px;
      background: url('../../../../assets/images/shadow.png') repeat;
      opacity: 0.3;
    }

    .banner-item{
      width:14.2857142%;
      height: 100%;
      float: left;
      color: #5a5a5a;

      .week-title{
        font-size: 20px;
        height: 45px;
        line-height: 30px;
        font-family: '微软雅黑';
        display:block;
        float: left;
        text-align: left;
        padding-left: 15px;
        padding-top: 15px;
        box-sizing: border-box;
        color:#5a5a5a;
        width:100%;
      }

      .date-text{
        font-size: 12px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin-left: 10px;
        margin-top: 5px;
        float: left;
      }

      .date-icon{
        width: 15px;
        height: 15px;
        background-size: cover;
        display: inline-block;
        margin:7px 5px 0 5px;
        float: left;
        vertical-align: middle;
      }

      .date-add{
        @extend  .date-icon;
        background-image: url("../../../../assets/images/add-icon.png");
      }

      .date-edit{
        @extend  .date-icon;
        background-image: url("../../../../assets/images/edit-icon.png");
        opacity: 0.7;
      }


    }

    $border-color:#979797;


     .event-row{
       width:100%;
       float: left;
       height:auto;
       display: block;
       clear: both;
       border-top: 1px solid $border-color;
       &:last-child{
         border-bottom: 1px solid $border-color;
       }
       .event-item{
         box-sizing: border-box;
         float: left;
         width:14.2857142%;
         height: 120px;
         color:#5b5b5b;
         border-right: 1px solid $border-color;
         font-size: 12px;
         display: flex;
         align-items: center;
         justify-content: center;

         padding:0 10px;

         &:first-child{
           border-left: 1px solid $border-color;
         }

         &.has-event{
           background: #ececec;
         }
       }
     }

    /*.table{
      width:100%;
      height: auto;
      border-collapse: collapse;
      table-layout:fixed;
      tr{
        border-top: 1px solid $border-color;
        &:last-child{
          border-bottom: 1px solid $border-color;
        }
      }


      td{
        vertical-align: middle;
        width:14.2857142%;
        height: 120px;
        background: #ececec;
        border-right: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        box-sizing: border-box;
        &:first-child{
          border-left: 1px solid $border-color;
        }
      }
    }*/
  }

</style>
<template>
    <div>
      <inner-banner></inner-banner>
      <div class="operation-panel">
        <div class="panel-left">
          <div class="row">
            <div class="check-group">
              <input class="radio" type="radio" name="date-select" v-model="dateSelectFlag" value="true"/>
              <span class="icon-select"></span>
              <span class="icon-text">按周</span>
            </div>
            <div class="check-group">
              <input class="radio"  type="radio" name="date-select" v-model="dateSelectFlag" value="false"/>
              <span class="icon-select"></span>
              <span class="icon-text">按月</span>
            </div>
            <div class="select-group">
              <el-date-picker type="year" style="width: 80px" v-model="date.year" formate="yyyy"></el-date-picker>
              <span class="date-select-text">年</span>
            </div>
            <div class="select-group">
              <el-date-picker type="month" style="width: 80px" v-model="date.month" format="MM" default-value="2017-1-1"></el-date-picker>
              <span class="date-select-text">月</span>
            </div>
          </div>
          <div class="row" style="padding-top: 5px;">
            <span class="icon-owner"></span>
            <span class="owner" style="margin:0px 5px">业主代表</span>
            <span class="owner">林宥嘉</span>
            <span class="select-time">（{{getYear}} 到 {{getMonth}}）</span>
          </div>
        </div>
        <div class="panel-right">
          <el-button style="margin-right: 20px">全部分类</el-button>
          <el-select  v-model="selectTask" placeholder="代办任务">
            <el-option
              v-for="item in list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button style="margin-left: 20px">历史记录</el-button>
        </div>
      </div>
      <div class="panel-body">
        {{tempArr}}
        <div class="event-body-item" v-for="item in tempArr">
          <div class="banner">
            <span class="banner-box-shadow"></span>
            <div class="banner-item">
              <span class="week-title">周日</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
            <div class="banner-item">
              <span class="week-title">周一</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
            <div class="banner-item">
              <span class="week-title">周二</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
            <div class="banner-item">
              <span class="week-title">周三</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
            <div class="banner-item">
              <span class="week-title">周四</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
            <div class="banner-item">
              <span class="week-title">周五</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
            <div class="banner-item">
              <span class="week-title">周六</span>
              <span class="date-text">2017-10-10</span>
              <span class="date-edit"></span>
              <span class="date-add"></span>
            </div>
          </div>
          <div class="event-row">
            <div class="event-item">
            </div>
            <div class="event-item"></div>
            <div class="event-item"></div>
            <div class="event-item"></div>
            <div class="event-item"></div>
            <div class="event-item"></div>
            <div class="event-item"></div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import InnerBanner from "../Banner";

  import { Button,Select,Option,DatePicker } from "element-ui";

  export default {
    name:"MyProject",
    components:{
      InnerBanner,
      "ElButton":Button,
      'ElSelect':Select,
      'ElOption':Option,
      'ElDatePicker':DatePicker
    },
    computed:{
      getYear(){
        return this.date.year.getFullYear();
      },
      getMonth(){
        return this.date.month.getMonth()+1;
      },
      getTotal(){
        return this.dateSelectFlag?1:5;
      }
    },
    data(){
      return {
        tempArr:[1],
        selectTask:"",
        date:{
          year:new Date(),
          month:new Date()
        },
        dateSelectFlag:true,
        list:[{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
      }
    },
    methods:{
    },
    watch:{
      dateSelectFlag(newVal,old){


        if(newVal&&this.tempArr.length==5){
          while(this.tempArr.length>1){
            this.tempArr.splice(0,1);
          }

          return;
        }

        if (!newVal&&this.tempArr.length==1){
          while(this.tempArr.length<5){
            this.tempArr.push(1);
          }

          return;
        }

      }
    }
  }

</script>
